<template>
  <div class="center-container">
    <Headbar />
    <HeadMenu ideName="brand" />
    <Hungbar />
    <!-- 轮播图部分 -->
    <div class="brand-swiper">
        <el-carousel :interval="5000" height="500px" :arrow="bannerImg.length >1?'always':'never'" :indicator-position="bannerImg.length >1?'':'none'">
            <el-carousel-item class="home-swiper-item cursor" v-for="(item,index) in bannerImg" v-if="index<12" :style="'background-image:url('+URL.PIC+item.resourceUrl+')'" @click.native="routeToPath(item.target.params?item.target.params.name:'', 'new')">
            </el-carousel-item>
        </el-carousel>
    </div>
    <!-- 轮播图部分 -->
    <div class="brand-main">
        <!-- 分类 -->
        <div class="classify-wrap">
            <div class="classify-list">
                <div :class="-1 == listActive?'classify-con classify-active':'classify-con'" @click="clickList(-1,'')">全部分类</div>
                <div :class="index == listActive?'classify-con classify-active':'classify-con'" v-for="(i,index) in lists" @click="clickList(index,i.tradeId)">{{ i.tradeName }}</div>
            </div>
        </div>
        <div class="brand-wrap">
            <div class="brand-list" v-for="item in brandList">
<!--                <img class="brand-logoImg" :src="URL.PIC+item.brandLogo" @click="routeToPath('/brand/introduce?brandId='+item.id,'new')" />-->
                <img class="brand-logoImg" v-if="item.brandLogo!='' && item.brandLogo!=undefined && item.brandLogo!=null && item.brandTale != 1" :src="URL.PIC+item.brandLogo" v-on:mousemove="openBrand(item)" :alt="item.brandName"/>
<!--                <img class="brand-logoImg" v-if="(item.brandLogo=='' || item.brandLogo==undefined || item.brandLogo==null) && item.brandTale != 1 " src="@/assets/images/meal/logo.png" alt="">-->

                <div class="brand-logoImg" v-if="(item.brandLogo=='' || item.brandLogo==undefined || item.brandLogo==null) && item.brandTale != 1 " v-on:mousemove="openBrand(item)" @click="routeToPath('/search/product?brand='+item.brandName,'new')" style="background-color: #f7f7f7;color: #999999;line-height: 60px;">youboy.com</div>
                <div class="list-con" v-if="item.brandTale === 1" v-on:mouseleave="closeBrand(item)" @click="routeToPath('/search/product?brand='+item.brandName,'new')">
                    <a class="view-btn">查看品牌</a>

                </div>
                <p style="font-weight: 600;font-size: 12px;">{{item.brandName}}</p>
            </div>

            <div class="order-nodata" v-if="(!brandList)||brandList.length===0">
                <img src="@/assets/images/member/notnull.png" />
                <p>暂时还没有品牌哦~</p>
            </div>
        </div>
        <Pagination v-show="brands.total>0" :pageSizes="pageSizes" :total="brands.total" :page.sync="listQuery.page" :limit.sync="listQuery.size"
                    @pagination="getTradeBrandList"/>

<!--        <div class="collet-foot">-->
<!--            <div class="collet-pagination">-->
<!--                <template>-->
<!--                    <el-pagination-->
<!--                            background-->
<!--                            layout="prev, pager, next"-->
<!--                            :current-page.sync="currentPage"-->
<!--                            :total="brands.total" :page-count="brands.pages" :page-size = "listQuery.size" @current-change="currentPagination" @prev-click="prevPagination" @next-click="nextPagination">-->
<!--                    </el-pagination>-->
<!--                    <div class="demo-input-suffix"> 共 {{brands.pages}} 页 到第 <el-input type="number" v-model="nowPage" /> 页 <el-button @click="actionPage()" type="button">确定</el-button> </div>-->
<!--                </template>-->
<!--            </div>-->
<!--        </div>-->
        <!-- 分类 -->
    </div>
    <Footbars />

  </div>
</template>
<script>
import Headbar from '@/components/Layouts/Headbar'
import HeadMenu from '@/components/Layouts/HeadMenu'
import Hungbar from '@/components/Layouts/Hungbar'
import Footbars from '@/components/Layouts/Footbars'
import Pagination from '@/components/Pagination'
import {getPicList,getTradeList,getBrandList} from '@/api/news'
import config from '@/seo/config'
export default {
  name: 'Introduce',
  components: {
    Headbar,
    HeadMenu,
    Hungbar,
    Footbars,
    Pagination,
  },
  data() {
    return {
        listActive: -1,
        brands:[],
        lists:[],
        bannerImg: [],
        nowPage:1,
        currentPage:1,
        displayBrand:false,
        brandList:[],
        pageSizes: [60, 120, 240, 360],
        listQuery: {
            page: 1,
            size: 60,
            tradeId:0,
        },
    }
  },
  created() {
     // this.getBannerList();
     // this.getTradeList();
     // this.getTradeBrandList();
  },
  async asyncData ({ app, query }) {
    let [res1, res2, res3] = await Promise.all([
        app.$axios.get('/extend/content/list?positionCode=brand_index&device=pc'),
        app.$axios.get('/category/operate/list?tradeId=0'),
        app.$axios.get('/category/brand/search_pc?page=1&size=60&tradeId=0')
    ])
    return {
        bannerImg: res1.data.data,
        lists: res2.data.data,
        brands: res3.data.data,
        brandList: res3.data.data.list
    }
  },
  head: config.brand,
  methods: {
    //获取品牌中心首页banner 图
    getBannerList(){
        getPicList({
            positionCode: 'brand_index',
            device: 'pc'
        }).then(res=>{
            this.bannerImg = res.data;
        })
    },
    // 获取一级品类列表
    getTradeList(){
        getTradeList({tradeId:0}).then(res =>{
            this.lists = res.data;
        });
    },
    //获取所有品牌
    getTradeBrandList(){
        getBrandList(this.listQuery).then(res =>{
            this.brands = res.data;
            this.brandList = this.brands.list;
        });
    },
    clickList(index,tradeId) {
        this.listActive = index;
        this.listQuery.page = 1;
        this.listQuery.size = 60;
        if(tradeId!=''){
            this.listQuery.tradeId = tradeId;
        }else{
            this.listQuery.tradeId = 0;
        }
        this.getTradeBrandList();
    },
      currentPagination(data){
          this.listQuery.page = data;
          this.getTradeBrandList();
      },
      prevPagination(data){
          this.listQuery.page = data;
          this.getTradeBrandList();
      },
      nextPagination(data){
          this.listQuery.page = data;
          this.getTradeBrandList();
      },
      openBrand(item){
          this.brandList.forEach(res =>{
              res.brandTale = 0;
          });
          item.brandTale = 1;
      },
      closeBrand(item){
          item.brandTale = 0;
          this.brandList.forEach(res =>{
              res.brandTale = 0;
          });
      },
      actionPage(){
          //跳转
          if(this.data.pages >= this.nowPage && this.nowPage > 0){
              this.currentPage = this.nowPage;
          }else{
              if(this.data.pages<this.nowPage){
                  this.nowPage = this.data.pages;
                  this.currentPage = this.data.pages;
              }else{
                  this.nowPage = 1;
                  this.currentPage = 1;
              }
          }
          this.listQuery.page = this.currentPage;
          this.getTradeBrandList();
      },
  }
}
</script>
<style lang="scss" scoped>

.center-container{
    background: #f7f7f7;
    width: 100%;
    min-width: 1200px;
    .brand-swiper{
        min-width: 1200px;
        .brandBannerImg{
            width: 100%;
            height: 500px;
            min-width: 1200px;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
        }
        .el-carousel__arrow--right {
            right: 64px;
        }
    }
    .brand-main{
        width: 1200px;
        margin: 0 auto;
        .classify-wrap{
            .classify-list{
                padding: 30px 0 15px;
                .classify-con{
                    display: inline-block;
                    padding: 10px 25px;
                    font-size: 14px;
                    color: #666;
                    border-radius: 40px;
                    cursor: pointer;
                    margin-bottom: 10px;
                }
                .classify-active{
                    background: #255B8B;
                    color: #fff;
                    font-size: 14px;
                }
            }
        }
        .brand-wrap{
            background: #fff;
            overflow: hidden;
            zoom: 1;
            margin-bottom: 40px;
            padding: 10px 25px;
            padding-bottom: 30px;
            .list-title{
                color: #333;
                font-size: 16px;
                margin: 15px 0 0 20px;
            }
            .brand-list{
                width: 140px;
                height: 100px;
                margin: 25px 25px 0;
                float: left;
                text-align: center;
                .list-con{
                    width: 140px;
                    height: 60px;
                    background: #255B8B;
                    border-radius: 6px;
                    text-align: center;
                    font-size: 14px;
                    .view-btn{
                        display: inline-block;
                        width: 100px;
                        height: 20px;
                        line-height: 20px;
                        border-radius: 13px;
                        text-align: center;
                        color: #255B8B;
                        background: #fff;
                        margin: 20px auto 0;
                    }
                    .brand-name{
                        color: #fff;
                    }
                }
                .brand-logoImg{
                    width: 140px;
                    height: 60px;
                    cursor: pointer;
                }
                .brand-text{
                    margin: 0 auto;
                    max-width: 120px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
        .pagination-item{
            margin-bottom: 40px;
            float: right;

        }
    }
}

.pagination-container {
    background: #f7f7f7;
    padding: 32px 16px;
    text-align: left;
}

.collet-pagination{
    clear: both;
    float: right;
    right: 4%;
    position: relative;
}

.demo-input-suffix {
    padding: 25px 0px;
    white-space: normal;
    height: 25px;
    display: inline-block;
    float: left;
    .el-input {
        width: 70px;
    }
}

.setup-content{
    margin-left: 200px;
    margin-top: 20px;
    background: #fff;
    border: 1px solid #eee;
    .collet-foot{
        background: #fff;
        width: 100%;
        display: inline-block;
    }
}

.el-pagination{
    padding: 30px 0px;
    white-space: normal;
    height: 30px;
    display: inline-block;
    float: left;
}

.order-nodata{
    padding: 140px 0;
    text-align: center;
    p{
        font-size: 14px;
        color: #888;
        margin-top: 20px;
    }
}
</style>
<style lang="scss">
.center-container .el-carousel__indicator .el-carousel__button{
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.brand-swiper{
    min-width: 1200px;
    .brandBannerImg{
        width: 100%;
        height: 500px;
        min-width: 1200px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    .el-carousel__arrow--right {
        right: 64px;
    }
    .home-swiper-item{
        background-size: cover;
        background-position: center;
    }
}
.brand-swiper .el-carousel__arrow {
    height: 54px;
    width: 54px;
    font-size: 22px;
}

.brand-swiper .el-carousel__arrow--left {
    left: 50%;
    margin-left: -600px;
}
.brand-swiper .el-carousel__arrow--right {
    right: 50%;
    margin-right: -600px;
}
</style>
